<template>
  <div>
    <el-dialog title="编辑员工" :visible="digshow" @close="closedig" top="5vh">
      <el-form :model="form" :rules="rules" ref="myform">
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input
            v-model="form.username"
            placeholder="1-30个字符"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth" prop="mobile">
          <el-input
            v-model="form.mobile"
            placeholder="请输入手机号"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="入职时间"
          :label-width="formLabelWidth"
          prop="timeOfEntry"
        >
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.timeOfEntry"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="聘用形式"
          :label-width="formLabelWidth"
          prop="formOfEmployment"
        >
          <el-select v-model="form.formOfEmployment" placeholder="请选择">
            <el-option
              v-for="(item, index) in optionlist"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="工号"
          :label-width="formLabelWidth"
          prop="workNumber"
        >
          <el-input
            v-model="form.workNumber"
            placeholder="1-20个字符"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="form-item"
          label="部门"
          :label-width="formLabelWidth"
          prop="departmentName"
        >
          <el-input
            v-model="form.departmentName"
            placeholder="请选择"
            @focus="myfocus"
          ></el-input>
          <el-tree
            class="myturr"
            v-if="showTree"
            :data="list"
            default-expand-all
            :props="defaultProps"
            @node-click="nodeClick"
            :expand-on-click-node="false"
          >
          </el-tree>
        </el-form-item>
        <el-form-item
          label="转正时间"
          :label-width="formLabelWidth"
          prop="correctionTime"
        >
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.correctionTime"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submit" type="primary">确 定</el-button>
        <el-button @click="closedig">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { geteverylist } from "../../../api/departments";
import { newuser } from "../../../api/employees";
import alltype from "../../../api/constant/employees";

export default {
  props: ["digshow"],
  data() {
    return {
      formLabelWidth: "120px",
      form: {
        username: "",
        timeOfEntry: "",
        mobile: "",
        correctionTime: "",
        workNumber: "",
        formOfEmployment: "",
        departmentName: "",
      },
      list: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      optionlist: alltype.hireType,
      showTree: false,
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 1, max: 30, message: "1-30个字符", trigger: "blur" },
        ],
        timeOfEntry: [
          { required: true, message: "入职时间不能为空", trigger: "blur" },
        ],
        workNumber: [
          { required: true, message: "工号不能为空", trigger: "blur" },
          { min: 1, max: 30, message: "1-20个字符", trigger: "blur" },
          {
            pattern: /^\d{6}$/,
            message: "工号格式不正确",
          },
        ],

        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
        ],
        formOfEmployment: [
          { required: true, message: "聘用形式不能为空", trigger: "blur" },
        ],
        departmentName: [
          { required: true, message: "部门不能为空", trigger: "blur" },
        ],
        correctionTime: [
          { required: true, message: "转正时间不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    closedig() {
      this.$emit("closedig", false);
      this.form = {
        username: "",
        timeOfEntry: "",
        mobile: "",
        correctionTime: "",
        workNumber: "",
        formOfEmployment: "",
        departmentName: "",
      };
      this.$refs.myform.resetFields();
    },
    submit() {
      this.$refs.myform.validate(async (isok) => {
        try {
          await newuser({ ...this.form });
          this.$emit("submmit");
          this.closedig();
          this.$message({
            type: "success",
            message: "新增成功",
          });
        } catch {
          console.log("添加失败");
        }
      });
    },
    async getAllList() {
      let res = await geteverylist();
      // console.log(res);
      this.list = res.depts;
      function plan(arr, pid) {
        let res1 = [];
        arr.forEach((item) => {
          if (item.pid === pid) {
            var children = plan(arr, item.id);
            if (children.length > 0) {
              item.children = children;
            }
            res1.push(item);
          }
        });
        return res1;
      }
      // console.log(plan(this.list, ""));
      this.list = plan(this.list, "");
    },
    myfocus() {
      this.showTree = true;
      this.getAllList();
    },
    nodeClick(data) {
      // 将 name 赋值给部门
      this.form.departmentName = data.name;
      this.showTree = false;
      // 关闭面板
    },
  },
};
</script>

<style lang='scss'>
.el-form-item__label {
  text-align: left;
}
.el-dialog__footer {
  padding-bottom: 10px;
  padding-top: 0px;
}
.form-item {
  width: 400px;
  position: relative;
  .myturr {
    position: absolute;
    left: 0;
    z-index: 999;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
}
</style>